<template>
	<view class="container">
		<view class="section-title">内容：</view>
		<view class="section-item">{{ item.content }}</view>
		<view class="section-title">讲解：</view>
		<rich-text :nodes="item.analysis" class="section-item"></rich-text>
		<view class="section-title">练习题：</view>
		<view class="section-item">
		</view>
		<view class="section-item"></view>
	</view>
</template>

<script>
import { detail } from "@/api/knowleadgePoint.js";

export default {
	data() {
		return {
			item: {
				id: 0,
				uuid: '',
				name: '',
				content: '',
				analysis: '',
				frequency: 0,
				score: 0,
				star_code: '',
			},
			questionList: [],
			questionExamList: [],
		}
	},
	onLoad(opts) {
		const { uuid } = opts;
		this.item.uuid = uuid;
		console.warn(uuid);
		this.getDetail();
	},
	methods: {
		getDetail() {
			uni.showNavigationBarLoading();
			return detail({
				uuid: this.item.uuid,
			}).then(({ content = {}, question = [], questionExam = [] }) => {
				Object.assign(this.item, content);
				this.questionList.splice(0, this.questionList.length, ...question);
				this.questionExamList.splice(0, this.questionExamList.length, ...questionExam);
			}).catch(console.warn).finally(uni.hideNavigationBarLoading);
		},
		handleOpItemClick(selector) {
			uni.pageScrollTo({
				selector,
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: white;
	padding: 20rpx;
	
	.section-item:nth-of-type(n+2) {
		margin-top: 10rpx;
	}
	.section-title:nth-of-type(n+2) {
		border-top: 1px solid $km-border-color;
	}
	.section-title {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		color: gray;
	}
	.section-item {
		margin-bottom: 10rpx;
	}
	
	.section-item:nth-last-child(n+1) {
		margin-bottom: 10rpx;
	}
}
</style>
